import 'package:flutter/material.dart';

// void main() {
//   runApp(const MaterialApp(
//     home: Test_Stack(),
//     debugShowCheckedModeBanner: false,
//   ));
// }

class Test_Stack extends StatelessWidget {
  const Test_Stack({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Stack 全属性案例")),
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.grey[300],
          child: Stack(
            // -------- Stack 的属性 ----------
            alignment: Alignment.center,
            // 所有未定位（未使用 Positioned/Align）的子组件如何对齐
            fit: StackFit.loose,
            // 决定未定位子组件在 Stack 的约束规则
            clipBehavior: Clip.hardEdge,
            // 超出 Stack 边界的内容是否裁剪，可选 none/antiAlias/antiAliasWithSaveLayer

            children: [
              // 背景层
              Container(
                width: 300,
                height: 300,
                color: Colors.blue[100],
                child: const Center(child: Text("背景层")),
              ),

              // 没有 Positioned 的子组件，会遵循 alignment
              Container(
                width: 100,
                height: 100,
                color: Colors.green,
                child: const Center(child: Text("居中(未定位)")),
              ),

              // 使用 Positioned 定位子组件
              Positioned(
                top: 10,
                left: 10,
                child: Container(
                  width: 60,
                  height: 60,
                  color: Colors.red,
                  child: const Center(child: Text("左上角")),
                ),
              ),

              Positioned(
                bottom: 10,
                right: 10,
                child: Container(
                  width: 60,
                  height: 60,
                  color: Colors.orange,
                  child: const Center(child: Text("右下角")),
                ),
              ),

              // 使用 Align 控制相对位置
              Align(
                alignment: Alignment.topCenter,
                child: Container(
                  width: 80,
                  height: 40,
                  color: Colors.purple,
                  child: const Center(child: Text("顶部居中")),
                ),
              ),

              // 溢出部分测试
              Positioned(
                top: -30,
                left: 100,
                child: Container(
                  width: 120,
                  height: 60,
                  color: Colors.black,
                  child: const Center(
                      child: Text("溢出内容", style: TextStyle(color: Colors.white))),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
